body, html { font-family: microsoft yahei, sans-serif; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; color: #555; width: 100% !important; height: 100% !important; }
h1 { font-weight: 700; } 
h1 strong { font-weight: 900; } 
h2 { text-transform: uppercase; line-height: 20px; margin: 0; } 
h3 { font-size: 16px; font-weight: 700; } 
h5 { text-transform: uppercase; font-weight: 700; line-height: 20px; } 
p { font-family: microsoft yahei, sans-serif; } 
p.intro { font-size: 16px; margin: 12px 0 0; line-height: 24px; font-family: 'Open Sans', sans-serif; } 
a { color: #fff; } 
a:hover, a:focus { text-decoration: none; color: #F4D03F; }
ul, ol { list-style: none; }
ul li, ol li { list-style: none; }
dt, dd { font-weight: normal }
em, i { font-style: normal; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } 
.clearfix { display: inline-block; } 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
ul, ol { padding: 0; -webkit-padding: 0; -moz-padding: 0; } 
.shadow {text-shadow: 0px 1px 3px #000;}
.shadow-t {text-shadow: 1px 1px 0 #000;}
/* Navigation */ 
.navbar-custom { margin-bottom: 0; background-color: rgba(0, 0, 0, .75); } 
.navbar-custom .navbar-brand { font-weight: 600; } 
.navbar-custom .navbar-brand .txt { color: #F4D03F; } 
.navbar-custom .navbar-brand:focus { outline: 0; } 
.navbar-custom .navbar-brand .navbar-toggle { padding: 4px 6px; font-size: 16px; color: #fff; } 
.navbar-custom .navbar-brand .navbar-toggle:focus, .navbar-custom .navbar-brand .navbar-toggle:active { outline: 0; } 
.navbar-custom a { color: #fff; } 
.navbar-custom .nav li a { margin: 0 15px;-webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } 
.navbar-custom .nav li a:hover { outline: 0; color: #F4D03F; background-color: transparent; } 
.navbar-custom .nav li a:focus, .navbar-custom .nav li a:active { outline: 0; background-color: transparent; color: #F4D03F; } 
.navbar-custom .nav li.active { outline: 0; } 
.navbar-custom .nav li.active a { background-color: rgba(255,255,255,.3); }
.navbar-custom .nav li.active a:hover { color: #fff; }
@media(min-width:768px) {
	.navbar-custom { padding: 20px 0; border-bottom: 0; letter-spacing: 1px; background: 0 0; -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out; -moz-transition: background .5s ease-in-out, padding .5s ease-in-out; transition: background .5s ease-in-out, padding .5s ease-in-out; } 
	.navbar-custom.top-nav-collapse { padding: 0; background: rgba(0, 0, 0, .75); }
} 
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} 
/* Home Style */ 
.intro { position: relative;display: table; width: 100%; height: 100%; padding: 100px 0; text-align: center; color: #fff; background: url(../img/intro-bg.jpg) no-repeat bottom center; background-color: #000; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } 
.intro .intro-body { display: table-cell; vertical-align: middle; } 
.intro .intro-body .brand-heading { color: #F4D03F; text-transform: uppercase; letter-spacing: -2px; font-size: 50px; } 
.intro .intro-body .intro-text { font-size: 18px; } 
.intro .intro-body .intro-text.code { background-color: rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 25px; text-shadow: 0px 0px 2px #0b3a3a, 0px 0px 3px #0b3a3a, 0px 0px 4px #97eae3; color: #00c0ca; } 
.intro .intro-body h2 {margin: 30px auto;} 
@media(min-width:768px) { 
	.intro { height: 100%; padding: 0; } 
	.intro .intro-body h1 { margin-bottom:20px;font-size: 70px; font-weight: 700; letter-spacing: -2px; } 
	.intro .intro-body .intro-text { font-size: 20px; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 20px auto; } 
}
.btn-circle {position: absolute;left:48%;bottom:5%;width: 70px; height: 70px; margin-top: 45px; padding: 7px 16px; border: 2px solid rgba(255,255,255,.2); border-radius: 100%!important; font-size: 40px; color: #F4D03F; background: 0 0; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; margin-bottom: 0px;z-index: 9; } 
.btn-circle i.animated { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s;-webkit-animation: swipeMoveDown 3s 1s ease infinite; } 
.btn-circle:hover, .btn-circle:focus { outline: 0; color: #F4D03F; background: rgba(255,255,255,.1); } 
.btn-circle:hover i.animated, .btn-circle:focus i.animated { -webkit-animation-name: pulse; -moz-animation-name: pulse; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; } 
@-webkit-keyframes pulse {
	0% { -webkit-transform: scale(1); transform: scale(1); } 
	50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 
	100% { -webkit-transform: scale(1); transform: scale(1); } 
}
@-moz-keyframes pulse {
	0% { -moz-transform: scale(1); transform: scale(1); } 
	50% { -moz-transform: scale(1.2); transform: scale(1.2); } 
	100% { -moz-transform: scale(1); transform: scale(1); } 
}
@-webkit-keyframes swipeMoveDown {
    0% {
        opacity: .5;
        -webkit-transform: translate3d(0, -5px, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate3d(0, 5px, 0);
	}
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
.section-title.center { padding: 8% 0 5%; } 
.section-title h2, .section-title.center h2 { font-size: 32px;font-weight: 400; margin-bottom: 30px; } 
.section-title.center hr { height: 4px; width: 170px; text-align: center; position: relative; background: #FFC107; margin: 0 auto; margin-bottom: 30px; border: 0; } 
/* About Section */ 
#about { position: relative;padding: 0;width:100%;height: 100vh; color: #fff;} 
#about .container {position: absolute;width:100%;top:10%;left:0;z-index:999;}
#about .container .content {width:980px;margin: auto;padding: 20px 50px;background-color: rgba(220, 228, 230, 0.8);border-radius: 10px;}
#about .container .content h1 {text-align: center;color: rgba(0, 188, 212, 0.05);text-shadow: 0px 1px 5px rgba(0, 188, 212, .5);}
#about .container .content h2 {margin: 0;font-weight: 700; text-align: center; color: rgba(169, 68, 66, 0.3); text-shadow: 0px -2px 3px rgba(128, 50, 48, 0.3);}
#about ul {margin:0;}
#about li { border-bottom: 1px dashed #a9a9a9; }
#about li .detail { padding: 0 0 20px 36px; color: #536d79; line-height: 30px;font-size: 16px; }
#about li .name { height: 60px; }
#about li .text { color: #e87008;line-height: 60px; font-size: 20px; font-weight: bold; transition: all .3s ease-in-out;text-shadow: 0px 1px 3px #38231c; }
#about li i { margin-right: 15px; font-size: 22px;color: #4CAF50;vertical-align: middle; } 
#about li:last-child {border: 0;}

/* Achivements Section */ 
#achivements {position: relative;padding: 80px 0; color: #aaa; background: #6f7275; background: -moz-linear-gradient(top, #6f7275 0%, #31353a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f7275), color-stop(100%, #31353a)); background: -webkit-linear-gradient(top, #6f7275 0%, #31353a 100%); background: -o-linear-gradient(top, #6f7275 0%, #31353a 100%); background: -ms-linear-gradient(top, #6f7275 0%, #31353a 100%); background: linear-gradient(to bottom, #6f7275 0%, #31353a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f7275', endColorstr='#31353a', GradientType=0 ); } .achivement-box { text-align: center; margin: 20px 0; } .achivement-box i.fa { font-size: 60px; font-weight: 400; color: #F4D03F; margin-bottom: 20px; } .achivement-box h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; } .achivement-box span.count { font-size: 36px; font-weight: 700; color: #fff; display: block; } 
#team { position: relative;padding: 80px 0; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%); background: -o-linear-gradient(top, #ffffff 0%, #cccccc 100%); background: -ms-linear-gradient(top, #ffffff 0%, #cccccc 100%); background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 ); } 
img.img-circle.team-img { width: 120px; height: 120px; border: 4px solid transparent; transition: all 0.5s; } 
#team .thumbnail:hover>img.img-circle.team-img { border: 4px solid #F4D03F; font-size: medium; } 
#team .thumbnail { background: transparent; border: 0; } 
#team .thumbnail .caption { padding: 9px; color: #5a5a5a; } 
/* Services Section */ 
#services { position: relative;padding: 80px 0;height:100%; color: #aaa; background: #6f7275; background: -moz-linear-gradient(top, #6f7275 0%, #31353a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f7275), color-stop(100%, #31353a)); background: -webkit-linear-gradient(top, #6f7275 0%, #31353a 100%); background: -o-linear-gradient(top, #6f7275 0%, #31353a 100%); background: -ms-linear-gradient(top, #6f7275 0%, #31353a 100%); background: linear-gradient(to bottom, #6f7275 0%, #31353a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f7275', endColorstr='#31353a', GradientType=0 ); } 
#services .section-title.center hr { background: #c1a533; } 
#services .section-title h2 { color: #ddd; }
#services .section-title p { font-size: 16px; }
#services .section-title p>strong {font-size: 20px;color: #d0d0d0;}
#services h4 { margin: 20px 0;color: #F4D03F; transition: all 0.5s; } 
#services>.container i.fa { font-size: 50px; width: 120px; height: 120px; padding: 34px 0; margin-bottom: 10px; border-radius: 50%; color: #aaa; background: #474b4f; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } 
#services .service {margin-bottom:20px;}
#services .service>p {font-size:16px;line-height: 2}
#services .service:hover > i.fa { color: #F4D03F; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } 
/* Gallery Section ==============================*/ 
#works { position: relative;height:100%;padding: 80px 0; } 
#works.bg1 {background: #00479d; background: -webkit-linear-gradient(-225deg, #22e1ff 0, #0873f5 48%, #00479d 100%); background: linear-gradient(-225deg, #22e1ff 0, #0873f5 48%, #00479d 100%); }
#works.bg2 {background: #00BCD4;background: -webkit-linear-gradient(-225deg, #28d6ec 0, #28d0d8 48%, #04686b 100%);background: linear-gradient(-225deg, #28d6ec 0, #28d0d8 48%, #04686b 100%);}
#works.bg3 {background: #4CAF50;background: -webkit-linear-gradient(-225deg, #FFEB3B 0, #26e08a 48%, #07b10e 100%);background: linear-gradient(-225deg, #FFEB3B 0, #26e08a 48%, #07b10e 100%);}
#works.bg4 {background: #607D8B;background: -webkit-linear-gradient(-225deg, #fff5d0 0, #9dd8cf 48%, #5b6d75 100%);background: linear-gradient(-225deg, #fff5d0 0, #9dd8cf 48%, #5b6d75 100%);}
#works.bg5 {background: #E91E63;background: -webkit-linear-gradient(-225deg, #E91E63 0, #FF9800 48%, #9C27B0 100%);background: linear-gradient(-225deg, #E91E63 0, #FF9800 48%, #9C27B0 100%);}

#works>h2 {text-align: center;color: #fff;font-weight:700;font-size: 36px;text-shadow: 1px 1px 5px #000;}
#works .pc-banner a>.note {display:block;position: absolute; left: 0; bottom: 0;text-align: center; background-color: rgba(0, 0, 0, .7); width: 100%; padding: 10px 10px; text-shadow: 0px 1px 2px #000;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
#works .pc-banner a:hover>.note {display:none;color: #fff;}
#works .pc-banner a>.note h3 {margin: 10px 0;}

ol.type li { display: inline-block; margin-left: 20px; } 
ol.type li:after { content: ' | '; margin-left: 20px; } 
ol.type li:last-child:after { content: ''; } 
ol.type li a { color: #444; padding: 2px 8px; } 
ol.type li a.active { background: #F4D03F; padding: 2px 8px; border-radius: 4px; } 
ol.type li a:hover { background: #F4D03F; padding: 2px 8px; border-radius: 4px; } 
.isotope-item { z-index: 2 } 
.isotope-hidden.isotope-item { z-index: 1 } 
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } 
.isotope-item { margin-right: -1px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } 
.isotope { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } 
.isotope .isotope-item { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }
.portfolio-item { margin-bottom: 30px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.portfolio-item:hover { margin-bottom: 30px; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
.portfolio-item .hover-bg { height: 260px; overflow: hidden; position: relative; }
.hover-bg .hover-text { position: absolute; text-align: center; margin: 0 auto; color: #ffffff; background: rgba(0, 0, 0, 0.66); padding: 25% 0; height: 100%; width: 100%; opacity: 0; transition: all 0.5s; }
.hover-bg .hover-text>h4 { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); transition: all 0.3s; }
.hover-bg:hover .hover-text>h4 { opacity: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateY(0); transform: translateY(0); }
.hover-bg .hover-text>i { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); transition: all 0.3s; }
.hover-bg:hover .hover-text>i { opacity: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); }
.hover-bg:hover .hover-text { opacity: 1; }

/* Testimonials Section */
#testimonials { position: relative;background: url(../img/testimonial-bg.jpg); background-size: cover; background-attachment: fixed; color: #ddd; padding: 80px 0; }
#testimonial { padding: 0; }
#testimonial .item { display: block; width: 100%; height: auto; }
#testimonial .item p { font-weight: 500; margin: 30px 0; font-size:20px; line-height:40px; color: #ddd; }
.owl-theme .owl-controls .owl-page span { display: block; width: 10px; height: 10px; margin: 5px 7px; filter: Alpha(Opacity=1); opacity: 1; -webkit-border-radius: 0; -moz-border-radius: 20px; border-radius: 50%; background: #FFFFFF; transition: all 0.5s; }
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { filter: Alpha(Opacity=100); opacity: 1; background: #F4D03F; }
.owl-theme .owl-controls .owl-page.active span { background: #F4D03F; }
/* Contact Section */
#contact { position: relative;padding: 80px 0; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%); background: -o-linear-gradient(top, #ffffff 0%, #cccccc 100%); background: -ms-linear-gradient(top, #ffffff 0%, #cccccc 100%); background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 ); }
#contact .fa { color: #607D8B; margin-bottom: 10px; }
#contact .content {font-size: 16px;text-shadow: 1px 1px 0px #fff;}
.btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; outline-offset: none; }
/* Footer */
nav#footer { background: #222222; color: #ddd; padding: 0;overflow: hidden; }
nav#footer .fnav { vertical-align: middle; }
ul.footer-social li { display: inline-block; margin-right: 10px; }
nav#footer p { font-size: 12px; margin-top: 10px;text-align: center; }

@-webkit-keyframes cursor {
	0%, 100% { background-color: #fff; }
	50% { background-color: transparent; }
}
.cursor { position: relative;margin-left: 5px; }
.cursor:after { position: absolute; content: ''; display: inline-block; width: 14px; height: 3px; bottom: 0; transform: translateY(-50%); animation: cursor 1.2s infinite steps(1, start); }
#rain-canvas {display: none;height:0px;}
svg.clouds {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg, rgb(30,30,40), rgb(50,50,60) );
}
.cloud{
    transform: translate(0,0);
    animation-name: cloudSlide;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-fill-mode: both;
    animation-timing-function: linear;    
}
@keyframes cloudSlide{
    from{
        transform: translate(0px, 0px)
    }
    to{
        transform: translate(30px, 0px);
    }
}

@media (max-width:979px) { 
    .navbar-toggle {color: #fff;}
    .intro .intro-body .brand-heading {display: block;font-size: 30px;}
    #services {height: auto !important;}
    #about .container .content {width:100%;}

}
@media (max-width:767px) { 
    .btn-circle {display: none;}
    #services>.container i.fa {font-size: 30px;width: 80px;height: 80px;padding: 25px 0;}
    #services h4 {margin: 10px 0;}
    #about {height:auto;background-color: #292933;}
    #about svg.clouds {display: none;}
    #about .container {position: relative;padding: 0;}
    #about .container .content {padding: 20px;border-radius: 0;}
    #about li .text {line-height: 1.5;}
}
